<template>
  <div class="container-mine">
    <!-- 绝对定位的tab -->
    <div class="tab-top">
      <div class="tab-item clearfix"
           v-for="(item, index) in tab_arr"
           :key="index"
           @tap="toggle(item)">
        <div class="msg"
             :class="{'active':item.id==tab_selected}">
          {{item.name}}
        </div>
      </div>
    </div>
    <!-- 所有活动 -->
    <div class="all"
         id="gamble"
         v-if="gamble_arr[0]&&tab_selected==1||help_arr[0]&&tab_selected==2">
      <scroll-view :scroll-y="true"
                   :style="{'height': '100%'}">
        <!-- 抽奖 -->
        <div class="gamble clearfix"
             v-if="gamble_arr[0]&&tab_selected==1">
          <div class="list">
            <!-- 遍历开始 -->
            <div class="list-item"
                 v-for="(val, index) in gamble_arr"
                 :key="index"
                 @tap="order_detail(val)">
              <!-- 倒计时 -->
              <div class="count-down clearfix"
                   v-if="val.end_time>0">
                距结束剩余：
                <span class="time"
                      v-if="val.good.day-0<1">
                  <span class="num">{{val.good.hours}}</span>
                  :
                  <span class="num">{{val.good.minutes}}</span>
                  :
                  <span class="num">{{val.good.seconds}}</span>
                </span>
                <span class="day"
                      v-else>
                  <span class="num">{{val.good.day}}</span>天
                </span>
                <div class="status">
                  <!-- 抽奖状态 -->
                  <!-- 成团中/成团成功 -->
                  {{val.good.status==0?'抽奖关闭':''}}
                  {{val.good.status==1?'成团中':''}}
                  {{val.good.status==2?'成团成功':''}}
                  {{val.good.status==3?'即将开奖':''}}
                  {{val.good.status==4?'成团失败':''}}
                  {{val.good.status==5?'已开奖':''}}
                </div>
              </div>
              <div class="count-down clearfix"
                   v-if="val.end_time<=0">
                <div class="msg clearfix">
                  活动结束
                  <div class="status">
                    <!-- 已开奖/抽奖关闭 -->
                    {{val.good.status==0?'抽奖关闭':''}}
                    {{val.good.status==1?'成团中':''}}
                    {{val.good.status==2?'成团成功':''}}
                    {{val.good.status==3?'即将开奖':''}}
                    {{val.good.status==4?'成团失败':''}}
                    {{val.good.status==5?'已开奖':''}}
                  </div>
                </div>

              </div>
              <div class="item-detail">
                <div class="item-img">
                  <img :src="base_url+val.good.img"
                       alt=""
                       v-if="base_url&&val.good.img"
                       class="img">
                </div>
                <div class="item-info">
                  <div class="item-name">
                    {{val.good.title}}
                  </div>
                  <!-- 进度条 -->
                  <div class="item-status">
                    <div class="schedule">
                      <div class="inner-bar"
                           :style="{'width': (val.good.part_sum/val.good.ok_sum)*100+'%'}">
                        <!-- 已参加{{val.part_sum}}人 -->
                      </div>
                    </div>
                    <div class="tip">
                      {{val.good.part_sum}}/{{val.good.ok_sum}}
                    </div>
                  </div>
                  <div class="item-price">
                    <div class="icon">￥</div>
                    <div class="num">{{val.good.price}}</div>
                    <div class="old-price">
                      ￥{{val.good.yprice}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- 助力 -->
        <div class="help clearfix"
             v-if="help_arr[0]&&tab_selected==2">
          <div class="list">
            <!-- 遍历开始 -->
            <div class="list-item"
                 v-for="(item, key) in help_arr"
                 :key="key"
                 @tap="order_detail(item)">
              <!-- 倒计时 -->
              <div class="count-down clearfix"
                   v-if="item.end_time>0">
                距结束剩余：
                <span class="time"
                      v-if="item.good.day-0<1">
                  <span class="num">{{item.good.hours}}</span>
                  :
                  <span class="num">{{item.good.minutes}}</span>
                  :
                  <span class="num">{{item.good.seconds}}</span>
                </span>
                <span class="day"
                      v-else>
                  <span class="num">{{item.good.day}}</span>天
                </span>
                <div class="status">
                  {{item.good.status==0?'助力中':'助力完成'}}
                </div>
              </div>
              <div class="count-down clearfix"
                   v-if="item.end_time<=0">
                <div class="msg clearfix">
                  活动结束
                  <div class="status">
                    {{item.good.status==1?'助力完成':"助力失败"}}
                  </div>
                </div>
              </div>
              <div class="item-detail">
                <div class="item-img">
                  <img :src="base_url+item.good.img"
                       v-if="base_url&&item.good.img"
                       alt=""
                       class="img">
                </div>
                <div class="item-info">
                  <div class="item-name">
                    {{item.good.title}}
                  </div>
                  <!-- 进度条 -->
                  <div class="item-status">
                    <div class="msg">
                      已参加{{item.good.part_sum}}人
                    </div>
                  </div>
                  <div class="item-price">
                    <div class="icon">
                      助力价<span class="num">{{item.good.price}}元</span>
                    </div>
                    <div class="old-price">
                      ￥{{item.good.yprice}}
                    </div>
                  </div>
                  <!-- 助力完成时显示抢购按钮 -->
                  <div class="item-btn"
                       @tap.stop="buy(item)"
                       v-if="item.status==1">
                    立即抢购
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
    <div class="empty"
         v-if="gamble_arr.length==0&&tab_selected==1||help_arr.length==0&&tab_selected==2">
      <img src="https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png"
           alt=""
           class="nothing">
      <div class="text">暂无活动哦~</div>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      tab_arr: [
        {
          name: "抽奖",
          id: 1
        },
        {
          name: "助力",
          id: 2
        }
      ],
      tab_selected: 1,
      gamble_arr: [null],
      help_arr: [null],
      imgUrl: common.image_resource,
      base_url: common.image_response,
      timer_mine: ""
    }
  },
  methods: {
    toggle (item) {
      if (this.tab_selected == item.id) {
        return false
      }
      this.tab_selected = item.id
      clearInterval(this.timer_mine)
      this.get_data()
    },
    calculate () {

    },
    get_data () {
      let that = this
      wx.showLoading({
        title: '加载中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('api/sale/v1_0/part/list', { type: this.tab_selected }, (result) => {
        let res = result.data
        if (res.status_code == 0) {
          wx.hideLoading();
          let arr = res.data
          arr.forEach(val => {
            if (!val.end_time || val.end_time > 0) {
              // 如果不存在存在end_time字段或者剩余时间大于0
              if (val.good) {
                let now_time = new Date().getTime()
                let end_time = val.good.end * 1000 - now_time
                val.end_time = end_time
                //计算出相差天数
                let days = Math.floor(end_time / (24 * 3600 * 1000))
                //计算出小时数
                let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                let hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                let minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                let seconds = Math.round(leave3 / 1000)
                val.good.day = days >= 10 ? days : '0' + days
                val.good.hours = hours >= 10 ? hours : "0" + hours
                val.good.minutes = minutes >= 10 ? minutes : "0" + minutes
                val.good.seconds = seconds >= 10 ? seconds : "0" + seconds
              }
            }
          });
          switch (this.tab_selected) {
            case 1:
              that.gamble_arr = arr
              break;
            case 2:
              that.help_arr = arr
              break;

            default:
              break;
          }



          that.timer_mine = setInterval(() => {
            arr.forEach(val => {
              if (!val.end_time || val.end_time > 0) {
                // 如果不存在存在end_time字段或者剩余时间大于0
                if (val.good) {
                  let now_time = new Date().getTime()
                  let end_time = val.good.end * 1000 - now_time
                  val.end_time = end_time
                  //计算出相差天数
                  let days = Math.floor(end_time / (24 * 3600 * 1000))
                  //计算出小时数
                  let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                  let hours = Math.floor(leave1 / (3600 * 1000))
                  //计算相差分钟数
                  let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                  let minutes = Math.floor(leave2 / (60 * 1000))
                  //计算相差秒数
                  let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                  let seconds = Math.round(leave3 / 1000)
                  val.good.day = days >= 10 ? days : '0' + days
                  val.good.hours = hours >= 10 ? hours : "0" + hours
                  val.good.minutes = minutes >= 10 ? minutes : "0" + minutes
                  val.good.seconds = seconds >= 10 ? seconds : "0" + seconds
                }
              }
            });
          }, 1000);
          switch (this.tab_selected) {
            case 1:
              that.gamble_arr = arr
              break;
            case 2:
              that.help_arr = arr
              break;

            default:
              break;
          }


        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }

      })
    },
    order_detail (val) {
      // 我的活动点击
      switch (this.tab_selected) {
        case 1:
          // 抽奖
          wx.navigateTo({ url: `/pages/my_group/main?goods_id=${val.sale_id}&user_id=${val.share_user_id}` });
          break;
        case 2:
          // 助力
          wx.navigateTo({ url: `/pages/help_goods_more/main?goods_id=${val.sale_id}&user_id=${val.share_user_id}` });
          break;

        default:
          break;
      }
    },
    buy (item) {
      // 购买
      wx.navigateTo({ url: `/pages/help_order/main?help_order_id=${item.id}` });
    }
  },
  onLoad () {
    clearInterval(this.timer_mine)
  },
  onReady () {
    this.get_data()
  },
  onShow () {
    clearInterval(this.timer_mine)
    this.get_data()
  },
  onUnload () {
    clearInterval(this.timer_mine)
  },
  onHide () {
    clearInterval(this.timer_mine)
  },
}
</script>

<style lang="less" scoped>
.container-mine {
  height: 100%;
  background-color: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  .tab-top {
    width: 100%;
    height: 36px;
    line-height: 36px;
    display: flex;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    .tab-item {
      flex: 1;
      .msg {
        display: inline-block;
        font-size: 16px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        position: relative;
      }
      .active {
        color: rgba(255, 56, 62, 1);
        &::before {
          content: "";
          width: 100%;
          height: 2px;
          background: rgba(255, 56, 62, 1);
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      &:nth-of-type(1) {
        .msg {
          float: right;
          margin-right: 45px;
        }
      }
      &:nth-of-type(2) {
        .msg {
          float: left;
          margin-left: 45px;
        }
      }
    }
  }
  .all {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 48px;
    flex: 1;
    .gamble {
      margin: 0 8px;
      margin-bottom: 100px;
      .list {
        width: 100%;
        border-radius: 10px;
        position: relative;
        .list-item {
          background: rgba(255, 255, 255, 1);
          margin: 0 8px;
          padding-left: 8px;
          padding-bottom: 16px;
          margin-bottom: 12px;
          border-radius: 8px;
          &:last-of-type {
            margin-bottom: 70px;
          }
          .count-down {
            height: 36px;
            line-height: 36px;
            // padding-left: 8px;
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            vertical-align: middle;
            .num {
              display: inline-block;
              vertical-align: middle;
              width: 16px;
              height: 16px;
              background: rgba(255, 56, 62, 1);
              line-height: 16px;
              text-align: center;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }
            .msg {
              font-size: 14px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
            .status {
              float: right;
              margin-right: 8px;
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 36px;
            }
            .day {
              vertical-align: middle;
              .num {
                margin-right: 3px;
                vertical-align: middle;
              }
            }
          }
          .item-detail {
            // margin: 0 8px;
            display: flex;
            .item-img {
              width: 100px;
              height: 100px;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .item-info {
              flex: 1;
              padding-left: 12px;
              position: relative;
              .iten-name {
                font-size: 16px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
              }
              .item-status {
                margin-top: 8px;
                .schedule {
                  width: 105px;
                  height: 12px;
                  border-radius: 7px;
                  display: inline-block;
                  vertical-align: bottom;
                  background: repeating-linear-gradient(
                    -45deg,
                    #ffe8e8 0px,
                    #ffe8e8 5px,
                    #ffedec 5px,
                    #ffedec 10px
                  );
                  border: 1px solid #ffced0;
                  .inner-bar {
                    height: 100%;
                    width: 50%;
                    border-radius: 7px;
                    background: repeating-linear-gradient(
                      -45deg,
                      #ff3733 0px,
                      #ff3733 5px,
                      #ff5847 5px,
                      #ff5847 10px
                    );
                    font-size: 9px;
                    font-family: "Medium";
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    line-height: 12px;
                    text-align: center;
                  }
                }
                .tip {
                  display: inline-block;
                  vertical-align: bottom;
                  margin-left: 7px;
                  font-size: 12px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(102, 102, 102, 1);
                }
              }
              .item-price {
                vertical-align: bottom;
                position: absolute;
                bottom: 0;
                left: 12px;
                .icon {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 56, 62, 1);
                }
                .num {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 18px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 56, 62, 1);
                }
                .old-price {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 12px;
                  font-family: "STHeitiTC-Light";
                  font-weight: 300;
                  color: rgba(102, 102, 102, 1);
                  margin-left: 5px;
                  position: relative;
                  &::before {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: rgba(102, 102, 102, 1);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
              }
              .item-btn {
                width: 66px;
                height: 29px;
                background: rgba(255, 74, 135, 1);
                border-radius: 6px;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 29px;
                text-align: center;
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }
          }
        }
      }
    }
    .help {
      margin: 0 8px;
      margin-bottom: 100px;
      .list {
        width: 100%;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        position: relative;
        .list-item {
          margin: 0 8px;
          margin-bottom: 12px;
          padding-bottom: 16px;
          &:last-of-type {
            margin-bottom: 70px;
          }
          .count-down {
            height: 36px;
            line-height: 36px; // padding-left: 8px;
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            vertical-align: middle;
            .num {
              display: inline-block;
              vertical-align: middle;
              width: 16px;
              height: 16px;
              background: rgba(255, 56, 62, 1);
              line-height: 16px;
              text-align: center;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }
            .msg {
              font-size: 14px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
            .status {
              float: right;
              margin-right: 8px;
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 36px;
            }
            .day {
              vertical-align: middle;
              .num {
                margin-right: 3px;
                vertical-align: middle;
              }
            }
          }
          .item-detail {
            // margin: 0 8px;
            display: flex;
            .item-img {
              width: 100px;
              height: 100px;
              background-color: #ccc;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .item-info {
              flex: 1;
              padding-left: 12px;
              position: relative;
              .iten-name {
                font-size: 16px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
              }
              .item-status {
                margin-top: 8px;
                .msg {
                  font-size: 13px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                }
              }
              .item-price {
                vertical-align: bottom;
                position: absolute;
                bottom: 0;
                left: 12px;
                .icon {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 14px;
                  font-family: "Medium";
                  font-weight: 400;
                  color: #333333;
                }
                .num {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 14px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 56, 62, 1);
                  margin-left: -4px;
                }
                .old-price {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 12px;
                  font-family: "STHeitiTC-Light";
                  font-weight: 300;
                  color: rgba(102, 102, 102, 1);
                  margin-left: 5px;
                  position: relative;
                  &::before {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: rgba(102, 102, 102, 1);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
              }
              .item-btn {
                width: 66px;
                height: 29px;
                background: rgba(255, 98, 60, 1);
                border-radius: 6px;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 29px;
                text-align: center;
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }
          }
        }
      }
    }
  }
  .empty {
    width: 154px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    .nothing {
      width: 128px;
      height: 114px;
      margin: 0 auto;
      display: block;
    }
    .text {
      width: 100%;
      font-size: 14px;
      font-weight: 400;
      margin-top: 13px;
      color: rgba(153, 153, 153, 1);
      text-align: center;
    }
  }
}
</style>

